<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>车辆认证</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
    <template>
        <van-cell-group :title="toptip" class="toptip">
          <van-cell title="行驶证正面" data-id="0" @click="photo(0)">
            <img class="thumbnail" :src="imgsrc[0]" alt="缩略图">
          </van-cell>
          <van-cell title="行驶证背面" data-id="1" @click="photo(1)">
            <img class="thumbnail" :src="imgsrc[1]" alt="缩略图">
          </van-cell>
        </van-cell-group>

        <van-cell-group>
          <van-cell title="车牌号">
              <div class="plateNumberBox">
                <span class="provincegrounp" @click="chooseNumber" v-text="proDefault"><van-icon name="arrow" /></span>
                <van-field class="number" v-model="plateNumber" required clearable />
              </div>
          </van-cell>
          <van-cell title="车系" is-link  @click="showsystem" :value="car_set"></van-cell>
          <van-cell title="车型" is-link  @click="showtype" :value="car_model"></van-cell>
        </van-cell-group>

        <van-cell-group>
            <van-cell title="姓名"><van-field class="textinput" v-model="name" input-align="right" clearable placeholder="请输入您的真实姓名" /></van-cell>
            <!--<van-cell title="手机号"><van-field class="textinput" v-model="phone" input-align="right" clearable placeholder="请输入您的手机号" /></van-cell>-->
            <!--<van-cell title="身份证号"><van-field class="textinput" v-model="IDcard" input-align="right" clearable placeholder="请输入您的身份份号" /></van-cell>-->
        </van-cell-group>

        <van-cell-group>
          <van-cell title="驾驶证" data-id="2" @click="photo(2)">
            <img class="thumbnail" :src="imgsrc[2]" alt="缩略图">
          </van-cell>
        </van-cell-group>

        <div class="bt"><van-button size="large" type="info" @click="submitData">立即认证</van-button></div>

        <div class="tap">
          <p>认证说明：</p>
          <p>1.将行驶证的正反面拍一张清晰地照片。<br/>
              2.将驾驶证正面拍一张清晰地照片。<br/>
              3.输入想认证车辆的车牌号。<br/>
              4.选择想认证车辆的车系以及车型。<br/>
              5.输入真实的姓名。</p>
        </div>

        <van-popup class="province" v-model="show0" position="bottom" :overlay="true">
            <van-picker :columns="province" show-toolbar title="简称" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
 
        <van-popup v-model="show1" position="right" :overlay="true">
            <div class="popup">
              <div class="cont">
                <div class="tabbox">
                  <ul class="tabwrap">
                    <li class="tabitem" @click="getCarSet(item.car_id, item.car_name)" v-for="item in car" :key="item.car_id" v-text="item.car_name"></li>
                  </ul>
                </div>
                <div class="wrapbox">
                  <ul class="carwrap">
                    <li class="caritem" v-for="val in carsystem" :key="val.set_id" @click="getCarModel(val.set_id, val.car_set_name)">
                      <!-- <img :src="val.img" :alt="val.set_type_name"> -->
                      <span v-text="val.set_type_name"></span><span v-text="val.car_set_name"></span>
                    </li>
                  </ul>
                </div>        
              </div>
            </div>
          </van-popup>

          <van-popup v-model="show2" position="right" :overlay="true">
            <div class="popup">
              <div class="cont">
                <ul class="carwrap">
                    <li class="caritem" @click="backData(val.car_model_name)" v-for="val in carsystem" :key="val.id" v-text="val.car_model_name"></li>
                </ul>
              </div>
            </div>
          </van-popup>
    </template>
</div>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
          title: '认证车辆',
          toptip: '您提交的信息仅用于爱车认证,壁虎不会再任何地方泄露你的信息',
          car_name: '',
          car_set: '请选择车系',
          car_model: '请选择车型',
          plateNumber: '',
          name: '',
          phone: '',
          IDcard: '',
          province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '川', '贵', '云', '渝', '藏', '陕', '甘', '青', '宁', '新', '港', '澳', '台'],
          proDefault: '鲁M',
          imgsrc: ['http://download.bihuapp.com/icon/d6.png', 'http://download.bihuapp.com/icon/d6.png', 'http://download.bihuapp.com/icon/d6.png'],
          car: [],
          cid: '',
          sid: '',
          carsystem: [],
          tiptxt: '',
          show0: false,
          show1: false,
          show2: false,
          showtip: false,
          phtoturl: '',
          phtotkey: '',
          token: ''
        },
        created () {
          mag.toLogin(function(rs) {
            this.token = rs.token
            localStorage.setItem('token', rs.token)
            this.getData()
          })
          // console.log(this.proDefault)
        },
        watch: {
          // 如果路由有变化，会再次执行该方法
          // '$route': 'fetchData'
        },
        methods: {
          chooseNumber () {
            this.show0 = true
          },
          onCancel (e) {
            this.show0 = false
          },
          onConfirm (value, index) {
            this.proDefault = value
            this.show0 = false
          },
          showsystem () {
            // console.log("showsystem")
            this.show1 = true
            this.show2 = false
            this.getData()
          },
          showtype () {
            // console.log("showtype")
            this.show2 = true
            this.show1 = false
            this.getCarType()
          },
          photo (id) {
            let that = this
            mag.camera({
              preview: function(res){
                // res: {key: '图片唯一标识', data:'缩略图的二进制base64编码字符串，仅仅用于小图展示'}
              },
              success: function(res){
                that.phtoturl = res.url
                that.phtotkey = res.key
                that.imgsrc.splice(id, 1, res.url)
                // res: {aid: '图片id', url:'图片url', key: '图片唯一标识'}
                // New:客户端版本4.5.1（2019年1月15号之后）及以上才会返回url这个参数，之前的版本仍然需要使用aid获取图片url，根据aid获取图片url方法请看下面说明
              },
              fail: function(res){
                // res: {key: '图片唯一标识'}
              },
            })
          },
          getData () {
            let that = this
            let postparams = {
              token: localStorage.getItem('token')
            }
            axios.get('/CarInfo/getCarNameInfo', postparams).then(({data}) => {
              if (data.code === 200) {
                that.car = data.data
                let cid = data.data[0].car_id
                let cname = data.data[0].car_name
                that.getCarSet(cid, cname)
              } else {
                this.car = ''
              }
            })
          },
          getCarSet (cid, cname) {
            let that = this
            this.car_name = cname
            let postparams = {
              token: localStorage.getItem('token'),
              car_id: cid
            }
            axios.post('/CarInfo/getCarSetInfoList', postparams).then(({data}) => {
              if (data.code === 200) {
                that.carsystem = data.data
              } else {
                that.carsystem = ''
              }
            })
          },

          getCarType () {
            let that = this
            let postparams = {
              token: localStorage.getItem('token'),
              set_id: this.sid
            }
            axios.post('/CarInfo/getCarModelInfoList', postparams).then(({data}) => {
              if (data.code === 200) {
                that.carsystem = data.data
                that.car_model = data.data[0].car_model_name
              } else {
                that.carsystem = ''
              }
            })
          },

          getCarModel (sid, sname) {
            this.show1 = false
            this.car_set = sname
            this.sid = sid
          },
          backData (mname) {
            this.car_model = mname
            this.show2 = false
          },
          submitData () {
            let that = this
            let carPalte = this.proDefault + this.plateNumber
            let postparams = {
              token: localStorage.getItem('token'),
              name: this.name,
              phone: this.phone,
              id_card: this.IDcard,
              car_name: this.car_name,
              car_set: this.car_set,
              car_model: this.car_model,
              driving_img: this.imgsrc[0],
              jiazhao_img1: this.imgsrc[1],
              jiazhao_img2: this.imgsrc[2],
              car_plate: carPalte
            }
            axios.post('/CarInfo/addDrivingInfo', postparams).then(({data}) => {
              if (data.code === 200) {
                this.$router.push({ name:'index' })
              } else {
                this.$toast({
                  type: "fail",
                  message: data.msg,
                })
              }
            })      
          }
        }
    })
  </script>
<style scoped>
html,body,#app{
  width: 100%;
  height: 100%;
  position: relative;
}
.van-cell-group__title{
  font-size: 12px;
  padding-bottom: 15px;
}
.van-button--large{
  height: 38px;
  line-height: 36px;
}
.van-button--info{
  border-color: #4F91F2;
  background-color: #4F91F2
}
.van-field__control{
  font-size: 14px;
}
.popup,
.van-popup{
  width: 100%;
  height: 100%;
}
.bt{
  margin: 10px auto;
  text-align: center;
  padding: 0 15px;
}
.white{
  fill: #fff;
}
.bg{
  background-color: #eee;
  padding: 3px;
  border-radius: 50%; 
}
.tap{
  font-size: 12px;
  color: #808080;
  padding: 10px;
}
.tap p{
  margin: 5px 0;
}
h1, h2 {
  font-weight: normal;
}

.vux-header-right .btn{
  color: #4F91F2;
}
.thumbnail{
  height: 29px;
}

.plateNumberBox{
  height: 32px;
  /* background-color: #42b983 */
  position: relative;
  border: solid 1px #4F91F2; 
  border-radius: 3px;
  width: 162px;
  float: right;
}
.number {
  box-sizing: border-box;
  padding: 3px 15px 3px 70px;  
  text-align: center;
}
.number .van-field__control{
  color: #4F91F2;
  font-size: 14px;
}
.provincegrounp {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4F91F2;
  padding: 5px 3px 4px;  
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  width: 55px;
  height: 32px;
  z-index: 9;
  color: #fff;
  text-align: center;
}
.provincegrounp>.van-icon{
  position: relative;
  top: 2px;
  left: 2px;
}

.province{
  color: #fff;
  font-size: 16px;  
}

.textinput{
  border: none;
  background: transparent;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  text-align: right;
  color: #808080;
  padding: 0 10px; 
}

.upload {
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.cont {
  position: relative;
  width: 100%;
  height: 100%;
}
.tabbox,.wrapbox{
  width: 36%;
  height: 100%;
  z-index: 9;
  position:absolute;
  top:0;
  left: 0;
  overflow: scroll;
}
.tabbox{
  background-color: #f0f0f0;
}
.wrapbox{
  width: 64%;
  left: auto;
  right: 0;
}

.tabwrap>li{
  display: block
}

.carwrap {
    width: 100%;
    box-sizing: border-box;
    list-style: none;
}
.caritem {
    padding: 10px 20px;
    border: solid #eee 1px;
    border: 1px 0;
    list-style: none;
    /* vertical-align: middle; */
    margin: 0;
    display: block;
}
.caritem>img{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    vertical-align: middle;
}
.tabitem {
    padding-left:10px;
    margin: 12px 0;
    line-height: 1.268em;
}
.tabitem:first-child {
    border-left: solid 3px #FFBB4C; 
}
.caritem .item{
  color: #353535;
}
</style>
</body>
</html>